<template>
  <cs-container :is-back-to-top="true">
    <el-tabs :tab-position="tabPosition" style="height: 100%">
      <el-tab-pane label="资产标签">
        <div class="btn-group">
          <el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="addTagGroup('', 1)">新增</el-button>
          <el-button type="primary"
            icon="el-icon-delete-solid"
            size="mini"
            @click="deleteAllTag"
            :disabled="this.ids.length === 0">删除</el-button>
        </div>
        <!-- 表格区域 -->
        <cs-table :table-data="currentTableData"
                  :table-label="tableLabel"
                  @handleButton="handleButton"
                  @handleSortChange="handleSortChange"
                  @handleSelectionChange="handleSelectionChange"
                  :table-option="tableOption"
                  class="table">
          <template slot="groupName" slot-scope="scope">
            <span style="cursor: pointer;" @click="addTagGroup(scope.row.id, 2)">{{scope.row.groupName}}</span>
          </template>
          <template slot="tag" slot-scope="scope">
            <el-tag type="small"
              class="tag"
              closable
              v-for='(items, index) in scope.row.assetsTagEntity'
              :key='index'
              @close="handelCloseTag(items.id)"
              @click="addTag(items.id, 2)"
              :color="items.color">{{items.name}}</el-tag>
              <el-tag class="btn" type="success" size="small" @click="addTag(scope.row, 1)">新 增</el-tag>
          </template>
        </cs-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="资产导入">
        <el-row>
          <p>使用说明：</p>
          <p>1. 从这里下载资产导入模板</p>
          <p>2. 选择要导入资产所属的资产组</p>
          <p>3. 选择填写好的资产文件，点击导入</p>
          <p>4. 若需要批量导入资产文件请点击添加按钮</p>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="来源设置">
        <el-row class="setting">
          <el-col>从事件采集中发现新资产
            <el-switch
              v-model="value1">
            </el-switch></el-col>
          <el-col>事件采集引擎采集到事件后实时提取事件中资产IP及类型信息，将新发现的资产自动添加到预备资产库中</el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <!-- 新增修改弹框 -->
    <add-tag-group ref="addTagGroup" @addTagGroup="getTags"></add-tag-group>
    <add-or-update ref="addorupdate" @addTag="getTags"></add-or-update>
  </cs-container>
</template>

<script>
import {
  getAssetsTags,
  delAssetsTags,
  delAssetsTagsGroup,
  delAllAssetsTagsGroup
} from '@/api/assets/configuration.js'
import CsTable from '@/components/cs-table'
import addTagGroup from './components/addTagGroup.vue'
import addOrUpdate from './components/adorupdate.vue'
export default {
  name: 'index1',
  data() {
    return {
      tabPosition: 'left',
      currentTableData: [],
      tableLabel: [
        { label: '资产组', param: 'groupName', align: 'center', sortable: false, slot: true, isShow: true, width: '150' },
        { label: '资产标签', param: 'tag', align: 'left', sortable: false, slot: true, isShow: true }
      ],
      tableOption: {
        label: '操作',
        width: '150',
        options: [
          { label: '删除', type: 'danger', icon: 'el-icon-delete', methods: 'delete', auth: 'sys:group:delete' }
        ]
      },
      pageNo: 1,
      pageSize: 10,
      total: 0,
      ids: [],
      id: '',
      value: '',
      value1: true
    }
  },
  components: {
    CsTable,
    addTagGroup,
    addOrUpdate
  },
  created() {
    this.getTags()
  },
  methods: {
    // 获取全部标签
    getTags() {
      const data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      getAssetsTags(data).then((res) => {
        this.total = res.data.totalRows
        this.currentTableData = res.data.rows
      })
    },
    // 删除标签
    handelCloseTag(id) {
      delAssetsTags(id).then((res) => {
        this.getTags()
      })
    },
    addTagGroup(id, type) {
      this.$refs.addTagGroup.init(id, type, true)
    },
    addTag(val, type) {
      this.$refs.addorupdate.init(val, true, type)
    },
    // 单个删除标签组
    handleButton(row) {
      const id = row.row.id
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        delAssetsTagsGroup(id).then((res) => {
          this.getTags()
        })
      })
        .catch(() => {
        })
    },
    // 多选操作
    handleSelectionChange(val) {
      this.ids = val.map(item => {
        return item.id
      })
    },
    // 批量删除
    deleteAllTag() {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        delAllAssetsTagsGroup(this.ids).then((res) => {
          this.getTags()
        })
      })
        .catch(() => {
        })
    },
    handleSortChange() {
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getTags()
    },
    handleCurrentChange(newPage) {
      this.pageNo = newPage
      this.getTags()
    }
  }
}
</script>

<style scoped>
  .el-tabs {
    padding: 20px;
  }
  .btn-group, .table {
    margin-bottom: 10px;
  }
  .el-tag{
    margin-right: 3px;
    cursor: pointer;
    color: #fff !important;
  }
  .btn {
    background-color: transparent;
    border: 1px #409eff dashed;
    cursor: pointer;
    color: #409eff !important;
  }
  .btn:hover {
    color: #fff !important;
    background-color: rgba(64, 158, 255, 0.8);
  }
  .el-row {
    padding: 30px 40px;
  }
  .setting {
    background-color: #F1F1F1;
    padding: 10px;
    border-radius: 5px;
  }
  .setting .el-switch {
    float: right;
  }
</style>
